<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
	
	<body>
		<form method="post" action="customers">
			<h1>Profile</h1>
			<br><br>
			<div>
			<table cellspacing=40>
				<tr>
				<td>First Name</td>
				<td>Last Name</td>
				<td id="ssn">SSN</td>
				<td id="dob">Date of Birth</td>
				<td>Email</td>
				<td>Phone</td>
				<td>PassPort</td>
				<td>Nationality</td>
				<td>Address</td>
				<td>City</td>
				<td>State</td>
				<td>Zip Code</td>
				</tr>
			</table>
			</div>

			<div id="divRead">
			<table cellspacing=25>
				<tr>
				<td>${sessionScope.person.firstname}</td>
				<td>${sessionScope.person.lastname}</td>
				<td>${sessionScope.person.ssn}</td>
				<td>${sessionScope.person.dob}</td>
				<td>${sessionScope.person.email}</td>
				<td>${sessionScope.person.phone}</td>
				<td>${sessionScope.customer.passport}</td>
				<td>${sessionScope.customer.nationality}</td>
				<td>${sessionScope.person.address}</td>
				<td>${sessionScope.person.city}</td>
				<td>${sessionScope.person.state}</td>
				<td>${sessionScope.person.zip}</td>
				</tr>
			</table>
			<input id="edit" align="right" type="button" value="Edit"/>
			</div>

			<div id="divEdit">
			<table cellspacing=50>
				<tr>
				<td><input type="text" name="firstname" size="10" maxlength="20" value="${sessionScope.person.firstname}"/></td>
				<td><input type="text" name="lastname" size="10" maxlength="20" value="${sessionScope.person.lastname}"/></td>
				<td><input type="text" name="email" size="10" maxlength="80" value="${sessionScope.person.email}"/></td>
				<td><input type="text" name="phone" size="10" maxlength="10" value="${sessionScope.person.phone}"/></td>
				<td><input type="text" name="passport" size="10" maxlength="6" value="${sessionScope.customer.passport}"/></td>
				<td><input type="text" name="nationality" size="10" maxlength="20" value="${sessionScope.customer.nationality}"/></td>
				<td><input type="text" name="address" size="10" maxlength="80" value="${sessionScope.person.address}"/></td>
				<td><input type="text" name="city" size="10" maxlength="20" value="${sessionScope.person.city}"/></td>
				<td><input type="text" name="state" size="10" maxlength="20" value="${sessionScope.person.state}"/></td>
				<td><input type="text" name="zip" size="5" maxlength="5" value="${sessionScope.person.zip}"/></td>
				</tr>
			</table>
			<input id="save" type="button" value="Save"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input id="cancel" type="button" value="cancel"/>
			</div>

		<input id="pageVal" type="hidden" name="pageVal"/>
		<input id="submit" type="submit" name="submit" value="Edit"/>
			
		</form>
		

<script language="JavaScript" type="text/JavaScript">

	$(window).load(function(){
		$("#submit").hide();
		if('${userSession}' ==  "" || '${userSession}' ==  null)
			self.location = "customerLogin.jsp";
		$("#divEdit").hide();
	});
	
	$("#edit").click(function(){
		$("#divRead").hide();
		$("#ssn").hide();
		$("#dob").hide();
		$("#divEdit").show();
	});
	
	$("#save").click(function(){
		$("#pageVal").val('save');
		if(!$("input[name=firstname]").val())alert("Please enter first name.");
		else if(!$("input[name=lastname]").val())alert("Please enter last name.");
		else if(!$("input[name=phone]").val())alert("Please enter phone number.");
		else if(($("input[name=phone]").val().length != 10) || isNaN($("input[name=phone]").val()))alert("Please enter valid phone number.");
		else if(!$("input[name=email]").val())alert("Please enter email.");
		else if(!$("input[name=address]").val())alert("Please enter address.");
		else if(!$("input[name=city]").val())alert("Please enter city.");
		else if(!$("input[name=state]").val())alert("Please enter state.");
		else if(!$("input[name=zip]").val())alert("Please enter zip code.");
		else if(isNaN($("input[name=zip]").val()) || ($("input[name=zip]").val().length != 5))alert("Please enter valid zip code.");
		else if(!$("input[name=passport]").val())alert("Please enter passport number.");
		else if(!$("input[name=nationality]").val())alert("Please enter your Nationality.");
		else $("#submit").click();
	});		
	
	$('#cancel').click(function(){
		self.location = "viewProfile.jsp";
		});	
	</script>
		
	</body>
</html>
